<!--
 * @Description: 主页tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-04 20:51:32
-->
<template>
  <div class="home">
    <van-nav-bar title="首页" />

    <!-- 标签页区域 -->

    <van-tabs @click="tabClickHandler" v-model="active" color="orange">
      <van-tab title="全部"></van-tab>
      <van-tab title="维修"></van-tab>
      <van-tab title="拆机"></van-tab>
      <van-tab title="安装"></van-tab>
    </van-tabs>
    <div class="orderList">
      <div
        class="box"
        @click="$router.push({ path: '/orderDetails', query: item })"
        v-for="(item, index) in orderList"
        :key="index"
      >
        <div class="left">
          <img
            v-if="item.status == '待接单'"
            src="../../assets/waitOrder.png"
            alt=""
          />
          <img
            v-else-if="item.status == '进行中'"
            src="../../assets/waitCompleteOrder.png"
            alt=""
          />
          <img v-else src="../../assets/completeOrder.png" alt="" />
        </div>
        <div class="right">
          <div>
            <strong>设备名称：</strong><span>{{ item.device_name }}</span>
          </div>
          <div><strong>工单状态：</strong>{{ item.status }}</div>
          <div><strong>工单类型：</strong>{{ item.type }}</div>
          <div v-if="item.bill_why != null">
            <strong>原因描述：</strong>{{ item.bill_why }}
          </div>
          <div v-else>
            <strong>原因描述：</strong
            ><van-tag round type="primary" color="#7232dd" plain
              >暂无原因描述</van-tag
            >
          </div>
          <div><strong>申报时间：</strong>{{ item.create_time | datefmt }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "../../utils/request.js";
// import { mapState } from "vuex";
// import { Toast } from "vant";
export default {
  data() {
    return {
      active: 0,
      params: {
        page: 1,
        pageSize: 100,
        status: null,
      },
      orderList: [],
    };
  },
  computed: {},

  methods: {
    //
    getAllWorkerOrdersByType() {
      switch (this.active) {
        case 0:
          break;
        case 1:
          this.params.type = "维修";
          break;
        case 2:
          this.params.type = "拆机";
          break;
        case 3:
          this.params.type = "安装";
          break;
      }
      get("/workorder/pageQuery", this.params).then((res) => {
        this.orderList = res.data.list;
      });
    },

    //tan标签点击处理函数
    tabClickHandler(name, title) {
      if (title == "全部") {
        this.params = {
          page: 1,
          pageSize: 100,
          status: null,
        };
      } else {
        this.params.type = title;
      }
      //重载数据
      this.getAllWorkerOrdersByType();
    },
  },
  created() {
    this.getAllWorkerOrdersByType();
  },
};
</script>

<style scoped>
.box {
  height: 125px;
  margin: 10px 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  font-family: "等线";
  cursor: pointer;
}

.left {
  width: 60px;
  /* line-height: 70px; */
}

.left img {
  width: 60px;
  height: 60px;
}

.right {
  width: calc(100% - 70px);
  padding-left: 10px;
}

.right > div {
  margin: 8px 0;
  font-size: 14.5px;
}

/* .right > div > span {
  font-size: 15px;
} */
</style>